<template>
    <div class="root">
        <div class="content">
            <el-form ref="form" :model="formData" :rules="rules" style="width: 40%;">
                <h2 style="text-align: center;">欢迎登录</h2>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formData.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" show-password clearable></el-input>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-button type="primary" @click="login" class="login-btn" plain>登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import router from '@/router';
import api from '@/api/request.js'

export default {
    data() {
        return {
            formData: {
                username: "",
                password: ""
            },
            rules: {
                username: [
                    { 
                        required: true, 
                        message: "请输入用户名", 
                        trigger: "blur" 
                    }
                ],
                password: [
                    { 
                        required: true, 
                        message: "请输入密码", 
                        trigger: "blur" 
                    }
                ]
            }
        }
    },
    methods: {
        login() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    api.loginApi(this.formData).then(res => {
                        if (String(res.data.code) === '1') {
                            this.$message.success('登录成功')
                            // 保存登录信息到localStorag
                            localStorage.setItem('employee', res.data.data.id);
                            // 登录成功后进行路由跳转
                            router.push('/');
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                } else {
                    this.$message.error('你没看见红框？？？');
                }
            });
        }
    }
}
</script>

<style scoped>
.root,.content {
    display: flex;
    background-color: #ccc;
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
    height: 100vh;              /* 设置容器的高度，这里使用了视口高度 */
}

.content {
    width: 50%;
    height: 60%;
    border-radius: 15px;
    /* border: #6777ef solid 0.5px; */
    /* border-color: #6777ef; */
    background-color: #fff;
}

.login-btn {
    background-color: black !important;
    border-color: black !important;
    color: white !important;
}

.el-form-item >>> .el-input__inner:focus{
    border-color:black;
}
</style>